<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="<%=path %>/statics/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path %>/statics/css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path %>/statics/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path %>/statics/css/style.css"/>
    <script src="<%=path %>/statics/js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    $(document).ready(function(){
 
    	var trolley;
    	var money;
		var summoney=0;
		$(".count").each(function(){
			 summoney=summoney+parseFloat($(this).html());
			});
		  $(".shopcar-checkbox label").addClass("shopcar-checkd");
		  $("#total").html("合计：￥"+summoney.toFixed(2));
		
		
    	$(".loading").addClass("loader-chanage");
		$(".loading").fadeOut(300);
		
		//点击+号，数据异步刷新
		$(".numjia").on("click",function(){
			var nums=$(this).parent().find('input[class*=num]');
			var count=$(this).parent().parent().find('h3[class*=count]');
			var price=$(this).parent().find('input[class*=price]');
			var tid=$(this).attr("trolleyid");
			nums.val(parseInt(nums.val())+1) ;
			var sum=parseFloat(parseInt(nums.val())*parseFloat(price.val()));
				if($(this).parent().parent().parent().parent().find(".shopcar-checkbox label").hasClass('shopcar-checkd')){
					money=parseFloat(price.val());
					summoney=summoney+money;
					$("#total").html("合计：￥"+summoney.toFixed(2));
					}
				   $.ajax({
						type:"GET",
						url:"<%=path%>/trolley/modif",
						data:{
							"id":tid,
							"num":parseInt(nums.val()),
							"count":sum
						},
						dataType:"json",
						success:function(data){
							if(data.updaResult == "true"){//修改成功,页面数量加1
								nums.val(parseInt(nums.val())) ;
								count.text(sum.toFixed(2));
							}else if(data.updaResult == "false"){//修改失败
								alert("对不起，修改失败");
							}
						},
						error:function(data){  //异常
							alert("对不起，修改异常");
					}
				}); 
			
    	});
		//点击-号，数据异步刷新
		$(".numjian").on("click",function(){
			var nums=$(this).parent().find('input[class*=num]');
			var count=$(this).parent().parent().find('h3[class*=count]');
			var price=$(this).parent().find('input[class*=price]');
			var tid=$(this).attr("trolleyid");
			if(nums.val()>1){
				nums.val(parseInt(nums.val())-1) ;
				var sum=parseFloat(parseInt(nums.val())*parseFloat(price.val()));
				if($(this).parent().parent().parent().parent().find(".shopcar-checkbox label").hasClass('shopcar-checkd')){
					money=parseFloat(price.val());
					summoney=summoney-money;
					$("#total").html("合计：￥"+summoney.toFixed(2));
					}
				   $.ajax({
						type:"GET",
						url:"<%=path%>/trolley/modif",
						data:{
							"id":tid,
							"num":parseInt(nums.val()),
							"count":sum
						},
						dataType:"json",
						success:function(data){
							if(data.updaResult == "true"){//修改成功,页面数量减1
								nums.val(parseInt(nums.val())) ;
								count.text(sum.toFixed(2));
							}else if(data.updaResult == "false"){//修改失败
								alert("对不起，修改失败");
							}
						},
						error:function(data){  //异常
							alert("对不起，修改异常");
					}
				}); 
			}else{
				
			}
    	});
		
		//删除进行时
		function deleteUser(obj){
			var count=$(obj).parent().parent().parent().parent().find('h3[class*=count]');
			if($(obj).parent().parent().parent().parent().find(".shopcar-checkbox label").hasClass('shopcar-checkd')){
				money=parseFloat(count.text());
				summoney=summoney-money;
				$("#total").html("合计：￥"+summoney.toFixed(2));
				}
		 	 $.ajax({
				type:"GET",
				url:"<%=path%>/trolley/del",
				data:{id:obj.attr("trolleyid")},
				dataType:"json",
				success:function(data){
					if(data.delResult == "true"){//删除成功：移除当前div,无提示，异步刷新
						obj.parent().parent().parent().parent().remove();
					}else if(data.delResult == "false"){//删除失败
						alert("对不起，删除失败");
					}
				},
				error:function(data){  //异常
					alert("对不起，删除异常");
				}
			}); 
		}
		
		//点击删除图标提示是否删除
		$(".deletetrolley").on("click",function(){
	    	trolley = $(this); 
	    	var flag=confirm("确定要删除这个宝贝吗？");
	    	if(flag){ //点击确定删除宝贝
	    		deleteUser(trolley);
	    	}
	    });
		
		
		  $(".shopcar-checkbox label").on('touchstart',function(){
			if($(this).hasClass('shopcar-checkd')){
				$(this).removeClass("shopcar-checkd");
				money=parseFloat($(this).parent().parent().find('h3[class*=count]').text());
				summoney=summoney-money;
				$("#total").html("合计：￥"+summoney.toFixed(2));
			}else{
				money=parseFloat($(this).parent().parent().find('h3[class*=count]').text());
				summoney=summoney+money;
	    		$("#total").html("合计：￥"+summoney.toFixed(2));
				$(this).addClass("shopcar-checkd");
			}
		});
    });
    	
    	
    </script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
<body>
	<header class="page-header">
		<h3>购物车</h3>
	</header>
	<script type="text/javascript">
	 var array=new Array();
	</script>
	<c:if test="${empty troList}"><div style="margin-top:200px;text-align: center;"><span style="font-size:20px;">购物车空空的，去转转吧</span></div></c:if>
	<div class="contaniner fixed-contb">
	
	<c:forEach items="${troList}" varStatus="adb" var="tro">
	<div class="listing">
		<section class="shopcar">
		<script type="text/javascript">
		array[${adb.count-1}]=${tro.id};
		</script>
		<div onclick="  array[${adb.count-1}]=${tro.id};" class="shopcar-checkbox" >
				<label for="shopcar" onselectstart="return false"></label>
				<input type="checkbox" id="shopcar"/>
		</div> 
			<a href="<%=path %>/product/detail/${tro.products.id}"><figure><img src="<%=path %>/statics/files/${tro.products.fileName}"/></figure></a>
			<dl>
				<a href="<%=path %>/product/detail/${tro.products.id}"><dt title="${tro.products.description}">
				 ${tro.products.description.substring(0,20)}
				 </dt></a>
				<c:if test="${!empty tro.color}">
				<dd>颜色：${tro.color }</dd>
				</c:if>
				<c:if test="${!empty tro.size }">
				<dd>尺寸：${tro.size }</dd>
				</c:if>
				<div class="add">
					<span class="numjian" trolleyid=${tro.id }>-</span>
					<input type="text" value="${tro.num }"  class="num"/>
					<input type="hidden" value="${tro.products.price }" class="price"/>
					<span class="numjia" trolleyid=${tro.id }>+</span>
				</div>
				<h3 class="count">${tro.count}</h3>
				<small><a class="deletetrolley" href="javascript:;" trolleyid=${tro.id }><img src="<%=path %>/statics/images/shopcar-icon01.png"  alt="删除" title="删除"/></a></small>
			</dl>
				</section>
			</div>
			</c:forEach>
			</div>
		<!--去结算-->
		<div style="margin-bottom: 16%;"></div>
	<script type="text/javascript">
	
	</script>
	<footer class="page-footer fixed-footer">
		<div class="shop-go">
			<b id="total">合计:0</b>
			<span><a onclick="fusa()">去结算</a></span>
		</div>
		<script type="text/javascript">
	
		function fusa(){
		location.href="<%=path%>/product/sys/buyshop.html?oid[]="+array;
		}
		</script>
		<ul>
			<li>
				<a href="<%=path %>/index.html">
					<img src="<%=path %>/statics/images/footer001.png"/>
					<p>首页</p>
				</a>
			</li>
			<li>
				<a href="<%=path %>/type/assort">
					<img src="<%=path %>/statics/images/footer002.png"/>
					<p>分类</p>
				</a>
			</li>
			<li class="active">
				<a href="javascript:;">
					<img src="<%=path %>/statics/images/footer03.png"/>
					<p>购物车</p>
				</a>
			</li>
			<li>
				<a href="<%=path %>/user/sys/self.html">
					<img src="<%=path %>/statics/images/footer004.png"/>
					<p>个人中心</p>
				</a>
			</li>
		</ul>
	</footer>
</body>
</html>